/*
 * @Author: hcluo
 * @Date: 2020-08-29 10:19:07
 * @LastEditors: hcluo
 * @LastEditTime: 2020-08-29 11:18:27
 * @Description:
 */
import React from 'react';
// import PropTypes from 'prop-types';

import { useRequest } from './redux/hooks';

import { Tree } from '@wind/wind-ui';

const TreeNode = Tree.TreeNode;

export default function LeftSide2() {
  const [data, status] = useRequest('./api/systemSectors.json', {}, []);
  console.log('%c 🍪 data: ', 'font-size:20px;background-color: #93C0A4;color:#fff;', data);

  const loop = data =>
    data.map(item => {
      if (item.children && item.children.length) {
        return (
          <TreeNode key={item.id} title={item.name}>
            {loop(item.children)}
          </TreeNode>
        );
      }
      return <TreeNode key={item.id} title={item.name} />;
    });

  return (
    <div className="common-left-side-2">
      <Tree
        className="draggable-tree"
        // defaultExpandedKeys={this.state.expandedKeys}
        draggable
        // onDragEnter={this.onDragEnter}
        // onDrop={this.onDrop}
      >
        {loop(data)}
      </Tree>
    </div>
  );
}

LeftSide2.propTypes = {};
LeftSide2.defaultProps = {};
